<template>
    <div class="page">
        <div class="btn-box clear-float">
            <div class="btn-item">全部（2345）</div>
            <div class="btn-item"><img src="../../assets/icon-add-min.svg">发布简历</div>
            <div class="btn-item" @click="showScreen=true"><img src="../../assets/icon-filter.png">筛选</div>
        </div>
        <swiper :options="imgs" height="200"/>
        <workplace-item v-for="(item, key) in workplaceList" :key="key" :data="item" label-color="#333"
                        @onclick="hdandleItemClick(item.id)"/>

        <top-popup-screen v-model="showScreen" @onok="handleScreen" @onreset="handleScreenReset">
            <telescopic-view label="方向" disablePull="true">
                <checkbox-group :items="timeList" :active="timeActive" @onactive="handleCheckboxTime"/>
            </telescopic-view>
            <telescopic-view label="所处行业" disablePull="true">
                <checkbox-group :items="tradeList" :active="tradeActive" @onactive="handleCheckboxTrade"/>
            </telescopic-view>
            <telescopic-view label="公司性质" disablePull="true">
                <checkbox-group :items="naturesList" :active="naturesActive" @onactive="handleCheckboxNatures"/>
            </telescopic-view>
        </top-popup-screen>

        <bottom-popup-select title="title" v-model="selectWindow" :items="[1,2,3]">
            123
        </bottom-popup-select>

    </div>
</template>

<style lang="less" scoped>
    .page {
        .btn-box {
            .btn-item {
                width: 12.5rem;
                float: left;
                line-height: 3.3rem;
                font-size: 1.1rem;
                text-align: center;

                img {
                    height: 1rem;
                    vertical-align: bottom;
                    margin: 1.15rem .4rem;
                }
            }
        }
    }
</style>

<script>

    import {workPlace} from 'api'

    export default {
        data() {

            const imgs = [
                {
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
                    to: '/same'
                },
                'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
            ];

            return {
                imgs,
                workplaceList: [],
                showScreen: false,
                timeList: ['不限', '今天', '最近三天', '最近七天', '最近一个月', '最近三个月'],
                timeActive: 0,
                tradeList: ['不限', '金融/财政金融/国际金融', '银行', '证券', '基金', '债券', '保险', '信托', '期货', '租赁', '投资/融资', '财务/会计/审计 ', '外汇', '其他金融'],
                tradeActive: 0,
                naturesList: ['不限', '其他企业', '国有企业', '集体企业', '私营/民营', '股份制企业'],
                naturesActive: 0,
                selectWindow: false
            }
        },
        created(){
            this.requestList();
        },
        methods: {
            requestList(){
                const params = {};

                if(this.timeActive){
                    const timeArray = [1, 3, 7, 30, 90];
                    params.time = timeArray[this.timeActive];
                }

                if(this.tradeActive){
                    params.companyIndustry = this.tradeList[this.tradeActive];
                }

                if(this.naturesActive){
                    params.companyName = this.naturesList[this.naturesActive];
                }

                this.$axios.get(workPlace.API_WORK_PLACE_LIST, {params}).then(({data})=>{
                    const {list} = data;
                    this.workplaceList = list.map(o=>{
                        return {
                            ...o,
                            title: o.jobFunction,
                            amount: o.salary,
                            place: o.workPlace,
                            name: o.companyName,
                            date: new Date(o.publishTime).toAppDate(),
                            id:  o.companyreleaseId
                        }
                    });
                    this.workplaceList[0].setUp = true;
                })
            },
            hdandleItemClick(id = 'id') {
                this.$router.push('/workplace/workDetail?id=' + id);
            },
            handleCheckboxTime(active) {
                this.timeActive = active;
            },
            handleCheckboxTrade(active) {
                this.tradeActive = active;
            },
            handleCheckboxNatures(active) {
                this.naturesActive = active;
            },
            handleActive(key, active){
                const k = this[key].indexOf(active);
                if(active === 0){
                    this[key] = [0];
                }else if(k == -1){
                    if(this[key][0] === 0){
                        this[key] = [active];
                    }else{
                        this[key].push(active);
                    }
                }else{
                    this[key].splice(k, 1);
                }
            },
            handleScreen(){
                this.requestList();
            },
            handleScreenReset(){
                this.timeActive = 0;
                this.tradeActive = 0;
                this.naturesActive = 0;
            }
        },
    }
</script>